<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=10">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="generator" content="editplus@">
        <meta name="author" content="作者">
        <meta name="keywords" content="关键字">
        <meta name="description" content="描述">
        <title>网页名称</title>
        <link rel="shortcut icon" href=""/><!-- 网页图标 -->
        <link rel="stylesheet" type="javascript" href="">
        <style type="text/css">
        	canvas{
        		background-color:#ccc;
        	}
        </style>
    </head>
    <body>
    	<canvas></canvas>
    	<script type="text/javascript">
    		var canvas = document.getElementsByTagName('canvas')[0],
    			ctx = canvas.getContext('2d');
    		canvas.width = getViewportSize().x - 30;
    		canvas.height = getViewportSize().y - 30;
    		var Ball = function(x,y,r){
    			this.x = limiteWidth(x);
    			this.y = limiteHeight(y);
    			this.dx = parseInt(Math.random()*10 -5);
    			this.dy = parseInt(Math.random()*10 -5);
    			this.color = getRondom();
    			this.r = r;
    			ballarr.push(this);
    			window.r = r;
    			this.indent = ballarr.length -1;
    		}
    		ballarr = [];
    		//小球运动
    		Ball.prototype.update = function(){
    			this.x += this.dx;
    			this.y += this.dy;
    			this.r -= 0.03;
    			if(this.r < 0){
    				this.remove();
    			}
    			if(this.x < this.r || this.x > canvas.width - this.r){
    				this.dx = -this.dx;
    			}
    			if(this.y < this.r || this.y > canvas.height - this.r){
    				this.dy = -this.dy;
    			}
    		}
    		// 小球清除
    		Ball.prototype.remove = function(){
    			for(var i=0,l=ballarr.length;i<l;i++){
    				if(ballarr[i] == this){
    					ballarr.splice(i,1);
    				}
    			}
    		}
    		
    		// 小球渲染
    		Ball.prototype.render = function(){
    			ctx.beginPath();
    			ctx.globalAlpha = '1';
    			ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
    			ctx.closePath();
    			ctx.fillStyle = this.color;
    			ctx.fill();
    			for(var i = this.indent,l=ballarr.length;i<l;i++){
    				if(Math.abs(ballarr[i].x - this.x)<150 && Math.abs(ballarr[i].y - this.y)<150){
    					ctx.beginPath();
    					ctx.moveTo(this.x,this.y);
    					ctx.lineTo(ballarr[i].x,ballarr[i].y);
    					ctx.globalAlpha = 10/Math.sqrt(Math.pow(this.x-ballarr[i].x,2)+Math.pow(this.y-ballarr[i].y,2));
    					ctx.closePath();
    					ctx.strokeStyle = '#000'
    					ctx.stroke();
    				}
    			}
    		}
    		//生成小球
    		addEvent(canvas,'mousemove',function(e){
    			new Ball(e.offsetX, e.offsetY, 30);
    		})
    		//定时器
    		setInterval(function(){
    			ctx.clearRect(0,0,canvas.width,canvas.height)
    			for(var i =0;i<ballarr.length;i++){
	    			ballarr[i].update();
	    			if(ballarr[i]){
	    				ballarr[i].render();
	    			}
    			}
    		},20);
    		function getViewportSize(){
    			if(window.innerWidth){
    				return{
    					x:window.innerWidth,
    					y:window.innerHeight
    				}
    			}else{
    				if(document.compatMode() == 'BackCompat'){
    					return{
    						x:document.body.clientWidth,
    						y:document.body.clientHeight
    					}
    				}else{
    					return{
    						x:document.documentElement.clientWidth,
    						y:document.documentElement.clientHeight
    					}
    				}
    			}
    		}
    		function addEvent(elem,type,fn){
    			if(elem.addEventListener){
    				elem.addEventListener(type,fn,false);
    			}else if(elem.attachEvent){
    				elem.attachEvent('on'+type,function(){
    					fn.call(elem);
    				})
    			}else{
    				elem['on' + type] = fn;
    			}
    		}
    		function limiteWidth(count){
    			return count < window.r || count > getViewportSize.x - window.r?window.r : count; 
    		}
    		function limiteHeight(count){
    			return count < window.r || count > getViewportSize.y - window.r?window.r : count; 
    		}
    		function getRondom(){
    			var arrstr = '1,2,3,4,5,6,7,8,9,a,b,c,d,e,f',
    				arr = arrstr.split(','),
    				color = '#';
    			for(var i = 0,l = arr.length;i<6;i++){
    				var number = parseInt(Math.random()*l);
    				color += arr[number];
    			}
    			return color;
    		}
    	</script>
	</body>
</html>